{% block sw_entity_multi_select %}
<sw-select-base
    ref="selectBase"
    class="sw-entity-multi-select"
    :is-loading="isLoading"
    v-bind="$attrs"
    :label="label"
    :disabled="disabled"
    @select-expanded="onSelectExpanded"
    @select-collapsed="onSelectCollapsed"
    @clear="clearSelection"
>
    {% block sw_entity_multi_select_base %}
    {% block sw_entity_multi_select_base_selection %}
    <template #sw-select-selection="{ identification, error, disabled, size, expand, collapse}">
        {% block sw_entity_multi_select_advanced_selection_modal %}
        <component
            :is="advancedSelectionComponent"
            v-if="isAdvancedSelectionActive && isAdvancedSelectionModalVisible"
            :initial-search-term="searchTerm"
            :initial-selection="currentCollection"
            v-bind="advancedSelectionParameters"
            @modal-close="closeAdvancedSelectionModal"
            @selection-submit="onAdvancedSelectionSubmit"
        />
        {% endblock %}

        {% block sw_entity_multi_select_base_selection_slot %}
        <sw-select-selection-list
            ref="selectionList"
            :selections="visibleValues"
            :invisible-count="invisibleValueCount"
            value-property="id"
            v-bind="{ size, labelProperty, placeholder, alwaysShowPlaceholder, searchTerm, disabled }"
            :input-label="label"
            :hide-labels="hideLabels"
            :selection-disabling-method="selectionDisablingMethod"
            @total-count-click="expandValueLimit"
            @item-remove="remove"
            @last-item-delete="removeLastItem"
            @search-term-change="onSearchTermChange"
        >
            {% block sw_entity_multi_select_base_selection_list %}
            {% block sw_entity_multi_select_base_selection_list_label %}
            <template #label-property="{ item, index, labelProperty, valueProperty, getKey }">
                {% block sw_entity_multi_select_base_selection_list_label_inner %}
                <slot
                    name="selection-label-property"
                    v-bind="{ item, index, labelProperty, valueProperty, getKey }"
                >
                    <sw-product-variant-info
                        v-if="displayVariants"
                        :variations="item.variation"
                    >
                        {{ displayLabelProperty(item) }}
                    </sw-product-variant-info>
                    <template v-else>
                        {{ displayLabelProperty(item) }}
                    </template>
                </slot>
                {% endblock %}
            </template>
            {% endblock %}
            {% endblock %}
        </sw-select-selection-list>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_entity_multi_select_base_results %}
    <template #results-list>
        {% block sw_entity_multi_select_base_results_slot %}
        <sw-select-result-list
            ref="swSelectResultList"
            :options="resultCollection"
            :is-loading="isLoading"
            :empty-message="$tc('global.sw-entity-multi-select.messageNoResults', { term: searchTerm }, 0)"
            :focus-el="$refs.selectionList.getFocusEl()"
            @paginate="paginate"
            @item-select="addItem"
        >
            {% block sw_entity_multi_select_base_results_list %}
            {% block sw_entity_multi_select_base_results_list_before %}
            <template #before-item-list>
                {% block sw_entity_multi_select_base_results_list_before_advanced_selection %}
                <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
                <div
                    v-if="isAdvancedSelectionActive"
                    class="sw-multi-select-filtering__advanced-selection sw-select-result"
                    @click="openAdvancedSelectionModal"
                >
                    {{ $tc('global.sw-entity-advanced-selection-modal.link') }}
                </div>
                {% endblock %}

                {% block sw_entity_multi_select_base_results_list_before_slot %}
                <slot name="before-item-list"></slot>
                {% endblock %}
            </template>
            {% endblock %}

            {% block sw_entity_multi_select_base_results_list_result %}
            <template #result-item="{ item, index }">
                <slot
                    name="result-item"
                    v-bind="{ item, index, labelProperty, valueProperty: 'id', searchTerm, highlightSearchTerm, isSelected, addItem, getKey, displayLabelProperty, isSelectionDisabled, descriptionPosition }"
                >
                    <sw-select-result
                        :selected="isSelected(item)"
                        v-bind="{ item, index }"
                        :disabled="isSelectionDisabled(item)"
                        :description-position="descriptionPosition"
                        @item-select="addItem"
                    >
                        {% block sw_entity_multi_select_base_results_list_result_preview %}
                        <template #preview>
                            <slot
                                name="result-label-preview"
                                v-bind="{
                                    item,
                                    index,
                                    labelProperty,
                                    valueProperty: 'id',
                                    searchTerm,
                                    highlightSearchTerm,
                                    getKey
                                }"
                            ></slot>
                        </template>
                        {% endblock %}
                        {% block sw_entity_multi_select_base_results_list_result_label %}
                        <slot
                            name="result-label-property"
                            v-bind="{ item, index, labelProperty, valueProperty: 'id', searchTerm, highlightSearchTerm, getKey }"
                        >
                            <sw-product-variant-info
                                v-if="displayVariants"
                                :variations="item.variation"
                                :highlighted="true"
                                :search-term="searchTerm"
                            >
                                {{ displayLabelProperty(item) }}
                            </sw-product-variant-info>
                            <template v-else>
                                <sw-highlight-text
                                    v-if="highlightSearchTerm"
                                    :text="displayLabelProperty(item)"
                                    :search-term="searchTerm"
                                />
                                <template v-else>
                                    {{ displayLabelProperty(item) }}
                                </template>
                            </template>
                        </slot>
                        {% endblock %}
                        {% block sw_entity_multi_select_base_results_list_result_description %}
                        <template #description>
                            <slot
                                name="result-description-property"
                                v-bind="{ item, searchTerm, highlightSearchTerm }"
                            ></slot>
                        </template>
                        {% endblock %}
                    </sw-select-result>
                </slot>
            </template>
            {% endblock %}

            {% block sw_entity_multi_select_base_results_list_after %}
            <template #after-item-list>
                <slot name="after-item-list"></slot>
            </template>
            {% endblock %}
            {% endblock %}
        </sw-select-result-list>
        {% endblock %}
    </template>
    {% endblock %}
    {% endblock %}

    <template #label>
        <slot name="label"></slot>
    </template>

    <template #hint>
        <slot name="hint"></slot>
    </template>
</sw-select-base>
{% endblock %}
